<template>
  <div :class="['subPage']">
    <div>
        <nav-bar
        :title="navTitle"
        position="center"
        color='linear-gradient(90deg, #557DF5 0%, #3F4ADE 100%)'
        :rowColor="'white'"
        :goBack="goBack"
        :isMsg='false'
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="mainContent" >
      <div class="mainInfo" v-if="orderDetails.show_address==1">
        <div class="innerBox">
          <div class="topTip">
            <span class="fl">{{wayJudge?'运费到付, 以线下配送商为准!':'选择医院, 线下自取'}}</span>
            <!-- wayJudge: true为配送   false 为自取   pointType == 2 为重症处方不需要支付 只能配送 -->
            <span class="chooseBtn" v-if="pointType != 2 && (orderDetails.status === '0'||orderDetails.status === '10'||orderDetails.status === '13')" >
                <span @click="pickWay(true)" :class="['open',{'active':wayJudge}]">配送</span>
                <span @click="pickWay(false)" :class="['close',{'active':!wayJudge}]">自取</span>
            </span>
            <span class="chooseBtn nonPayStatus" v-else >
                <span @click="pickWay(true)" :class="['open',{'active':false}]">{{wayJudge?'配送':'自取'}}</span>
            </span>
          </div>
          <div class="addressBox" @click="goAddressManage">
            <span class="leftImgBox">
              <img :src="(addressInfo.address_id&& wayJudge)||(storeInfo.placepointid && !wayJudge)?'/static/images/map.png':'/static/images/add.png'"
              :class="{'beingMap':(addressInfo.address_id&& wayJudge)||(storeInfo.placepointid && !wayJudge)}" alt="">
            </span>
            <span v-if="addressInfo.address_id && wayJudge">
              <p>
                <span class="boldFont name" >{{addressInfo.consignee}}</span>
                <span>{{addressInfo.phone}}</span>
                <span>邮编:{{addressInfo.zipcode}}</span>
              </p>
              <p>{{addressInfo.province_name?addressInfo.province_name:''}}
                 {{ addressInfo.city_name?addressInfo.city_name:'' }}
                 {{addressInfo.district_name?addressInfo.district_name:''}}
                 {{addressInfo.address}}
              </p>
            </span>
            <span v-else-if="storeInfo.placepointid && !wayJudge">
              <div class="boldFont storeName">{{storeInfo.placepointname}}</div>
              <p>{{storeInfo.address?storeInfo.address:''}}</p>
            </span>
            <span v-else-if="!addressInfo.address_id && wayJudge">
              <p class="boldFont" >添加地址</p>
              <p>您还未添加地址，请先添加收货地址</p>
            </span>
            <span v-else>
              <p class="boldFont" >添加门店</p>
              <p>您还未选择门店，请先选择门店</p>
            </span>
          </div>
        </div>
      </div>
      <scroll-view
      :scroll-y="true"
      class="msgList"
      :scroll-with-animation='true'
      >
        <div class="contentBox" v-if="orderDetails.express || orderDetails.emsnumber">
          <div class="expressBox">
            <span>
              <img src="/static/images/express.png" alt="">
            </span>
            <span :class="{'moveTop':ifIphonex}" >物流信息</span>
          </div>
          <div class="bottom">
            <div class="infoBox">
              <span>{{orderDetails.express?orderDetails.express:''}} {{orderDetails.emsnumber?orderDetails.emsnumber:''}}</span>
              <span @click="copyExpressInfo(orderDetails.emsnumber)" v-if="wayJudge" > 复制 </span>
            </div>
          </div>
        </div>
        <div class="contentBox">
          <div class="top">处方号: {{orderDetails.orderno}}</div>
          <div class="center" >
            <div class="nameBox">
              <span class="nameInfo">{{orderDetails.regular_name}}</span>
              <span>{{orderDetails.sex}}</span>
              <span class="bar">/</span>
              <span>{{orderDetails.age}}岁</span>
            </div>
            <div class="infoBox2">
              <span class="leftTip" style="display: inline!important">负责医生:</span>
              <span style="margin-left:0rpx;" > {{orderDetails.doctor_name}} </span>
              <span>
                <span>{{orderDetails.positional_title}}</span>
                <span class="bar">/</span>
                <span>{{orderDetails.dept_name}}</span>
              </span>
            </div>
            <div class="infoBox">
              <span class="leftTip">就诊卡号 </span> :
              <span> {{orderDetails.his_patientcard}}</span>
            </div>
            <div class="infoBox">
              <span class="leftTip">开具时间 </span> :
              <span>{{orderDetails.insert_time}}</span>
            </div>
            <div class="infoBox">
              <span class="leftTip">
                诊
               <span class="spacing"></span>
                断
              </span> :
              <span>{{orderDetails.diagnose_summary?orderDetails.diagnose_summary:'暂无'}}</span>
            </div>
          </div>
        </div>
        <div class="contentBox" v-for="(item,index) in orderDetails.item_list" :key="index">
          <div class="center">
            <div class="medicalTips">{{item.item_name}}</div>
            <div class="medicalBox">
              <span class="fl medicalName" >商品名： {{item.trade_name ? item.trade_name : ''}}</span>
              <span class="fr" >{{item.count}}</span>
            </div>
            <div class="medicalBox" style="margin-top:0rpx">
              <span class="fl medicalName" >{{item.item_category?item.item_category:''}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.insurance_desc?item.insurance_desc:''}}</span>
            </div>
            <span class="redSign"></span>
          </div>
          <div class="bottom">
            <p>
              <span>单价 :</span>
              <!-- <span class="dollor" >￥</span> -->
              <span class="price" >{{item.item_price}}</span>
            </p>
            <p>
              <span>小计  :</span>
              <!-- <span class="dollor" >￥</span> -->
              <span class="price" >{{item.item_sum}}</span>
            </p>
          </div>
        </div>
        <div style="height:5rpx" ></div>
      </scroll-view>
      <div class="payBtn">
        <p>
          订单总额
          <span class="price">{{orderDetails.ordersum}}</span>
        </p>
        <!-- <p v-else ></p> -->
        <span class="btn" v-if=" ((addressInfo.address_id && wayJudge)||(storeInfo.placepointid && !wayJudge))&&(orderDetails.status === '0'||orderDetails.status === '10'||orderDetails.status === '13')" @click="showTips">
          {{pointType==='1'?'去支付':'提交'}}
        </span>
      </div>
      <!-- 支付弹窗层 -->
      <div class="payModal" v-if="PayFlag">
        <div class="pay_content">
          <div class="title">
            <p>选择支付方式</p>
            <img src="/static/images/close.png" alt @click="PayFlag=false" />
          </div>
          <div class="content">
            <div class="lineItem" @click="iscash = true">
              <p>
                <img src="/static/images/peoson_pay.png" alt class="logo" />
                现金支付
                <span>(支持微信支付)</span>
              </p>
              <img
                :src="iscash?'/static/images/pay_checked.png':'/static/images/pay_notcheck.png'"
                alt
              />
            </div>
<!--            只有患者在预约的时候选的是职工医保 才显示医保支付-->
            <div class="lineItem" @click="iscash = false" v-if="feePayStatus">
              <p>
                <img src="/static/images/yb_pay.png" alt class="logo" />
                医保支付
                <span>(支持武汉医保)</span>
              </p>
              <img
                :src="iscash?'/static/images/pay_notcheck.png':'/static/images/pay_checked.png'"
                alt
              />
            </div>
            <div class="lineItem">
              处方订单费用：
              <span class="cost">{{payDetail.prescription_price}}</span>
            </div>
            <div class="lineItem">
              检验检查订单费用：
              <span class="cost">{{payDetail.check_price}}</span>
            </div>
            <div class="sureBtn">
              <p class="total">
                诊疗费用合计：
                <span>{{payDetail.sum}}</span>
              </p>
              <p class="tip">支付成功后，您可在诊疗订单、处方、检验、检查模块查看订单状态</p>
              <p class="button" @click="toPay">支付</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 地址管理 弹层 -->
      <div class="fillOtherMsg" v-if="chooseAddressModal">
        <address-manage :isComponent="true" v-if="wayJudge"  @beingChooseAdress="onchooseAddress"></address-manage>
        <store-address :isComponent="true"  v-else  @beingChooseAdress="onchooseAddress"></store-address>
      </div>
      <!-- 自取支付确认 -->
      <div v-if="modelStatus" class="payComfirmModal">
        <div class="sure">
          <div class="title">该处方药品您已选择线下“自取”，请仔细核对订单信息，确认无误后完成支付。</div>
          <div class="btm">
            <div @click="modelStatus = false" class="cancel">取消</div>
            <div @click="payHint" >确定</div>
          </div>
        </div>
      </div>
      <!-- 自取支付确认 -->
      <div v-if="setOrder" class="payComfirmModal">
        <div class="sure">
          <div class="top fontWeight">诊疗订单通知</div>
          <div class="title2">您有新的诊疗订单，请确认！</div>
          <div class="btm">
            <!-- <div @click="setOrder = false" class="cancel">取消</div> -->
            <div class="backBlue" @click="getnewOrder" >获取新订单</div>
          </div>
        </div>
      </div>
      <div :class="{'ipxBottom':ifIphonex}" ></div>
    </div>
    <i-toast id="toast" />
  </div>
</template>
<script>
  let app = getApp()
  import api from '@/api/api'
  import navBar from '@/components/navBar'
  const {
    $Toast,
    $Message
  } = require('../../../../../static/iview/base/index')
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  import addressManage from '../addressManage/index'
  import storeAddress from '../storeAddress/index'
  export default {
    computed: {
      ...mapState([
        'ifIphonex', 'talkInfo'
      ])
    },
    components: {
      navBar,
      addressManage,
      storeAddress
    },
    data() {
      return {
        orderDetails: {
          address:{}
        },
        addressInfo: {},
        storeInfo: {
          address: '',
          placepointid: '',
          placepointname: '',
          tel: ''
        },
        imgUrl: '',
        rightImg: '',
        chooseAddressModal: false,
        navTitle: '订单详情',
        wayJudge: true,
        PayFlag: false,
        iscash: true,
        pointType: '1', // 2 为重症处方不需要支付
        payDetail: {}, // 订单支付信息
        modelStatus: false,
        feePayStatus: false, // 是否有医保支付这个选项
        setOrder: false,
      }
    },
    onShow () {
      this.imgUrl = api.imgUrl
      this.payFlag = false
      this.getDetails()
    },
    onLoad (options) {
      // this.toPay()
      Object.assign(this.$data, this.$options.data()) // 初始化data 中的数据
      if (options.orderno) {
        this.orderno = options.orderno
        this.pointType = options.type?options.type:'2'
      }
    },
    onUnload() {
    },
    methods: {
      // 获取新订单
      getnewOrder() {
        this.setOrder = false
        this.PayFlag = false
        // this.getDetails()
        this.$router.go(-1)
        // this.$router.replace(`/pages/center/child/prescriptionOrder/main`)
      },
      // 获取订单详情
      getDetails() {
        this.$api.getPrescriptionDetail({order_no:this.orderno}).then(res=>{
          console.log(res.data)
          if(res.data.address) {
            this.storeInfo.address = res.data.address.place_point_address
            this.storeInfo.placepointname = res.data.address.place_point_name
            this.storeInfo.placepointid = res.data.address.place_point_id
          }
          this.wayJudge = res.data.shipping_method == '1' ? false : true
          this.orderDetails = res.data
          this.addressInfo = res.data.address===null?{}:res.data.address
          this.pointType = res.data.point_type
          this.orderDetails.insert_time = this.$utils.filterTime(this.orderDetails.insert_time,8)
        }).then(() => {
          this.$api.user_regular_list("", { showLoading: true }).then( (res)=> {
            for (let i = 0; i < res.data.length; i++) {
              if (this.orderDetails.regular_id == res.data[i].regular_id) {
                if (res.data[i].fee_type_code == 'WHA01') {
                  this.feePayStatus = true
                  return
                }
              }
            }
            this.feePayStatus = false
          })
        })
        this.recodeList = []
      },
      // 打开地址 管理地址弹层
      goAddressManage () {
        if( this.orderDetails.status === '0'||this.orderDetails.status === '10'||this.orderDetails.status === '13') {
          if(!this.wayJudge) {
            this.navTitle = '自提'
            this.chooseAddressModal = true
            return
          }
          this.chooseAddressModal = true
          this.navTitle = '收货地址'
        }
      },
      // 复制 物流信息
      copyExpressInfo (msg) {
        wx.setClipboardData({
          data: msg + '',
          success (res) {
            wx.getClipboardData({
              success (res) {
                console.log(res.data) // data
              }
            })
          }
        })
      },
      // 路由反馈函数
      goBack () {
        if (this.chooseAddressModal) {
          this.navTitle = '订单详情'
          this.chooseAddressModal = false
          this.getDetails()
        } else {
          this.$router.go(-1)
        }
      },
      pickWay (jud) {
        if(this.orderDetails.status === '0'||this.orderDetails.status === '10'||this.orderDetails.status === '13') {
          this.wayJudge = jud
        }
      },
      // 地址组件返回选择的消息
      onchooseAddress (item) {
        this.chooseAddressModal = false
        console.log(item,'地址组件回参')
        if(this.wayJudge) {
          this.addressInfo = {
            address: item.street,
            address_id: item.id,
            city_code: item.zones.city.id,
            city_name: item.zones.city.name,
            consignee: item.consignee,
            district_code: item.zones.area.id,
            district_name: item.zones.area.name,
            phone: item.phone,
            province_code: item.zones.province.id,
            province_name: item.zones.province.name,
            zipcode: item.zip_tag
          }
        } else {
          this.storeInfo = item
        }
        this.navTitle = '订单详情'
      },
      // 支付订单对比实际订单
    async  setPayOrder() {
        
        return result.msg
      },
      // 提交  去支付
    async  toPay() {
        // 检测支付订单与实际订单做对比
        let result = await this.$api.orderPayWechatMini({ order_id: this.orderDetails.order_id },{ showLoading: true })
        console.log(result)
        if(result.msg.indexOf("您有新的诊疗订单") > -1) {
          this.setOrder = true
          return
        }
        let pages = getCurrentPages()
        let step = 3;
        console.log(pages[pages.length - 2])
        if (pages[pages.length - 2].route==='pages/center/child/orderDetails/main') {
          // 检验检查跳转来的 step+1
          step ++
        }
        var that = this;
        if (this.iscash) {
          that.$storage.setCardeStatus(step);
          this.$router.push(
            `/pages/center/child/pay/main?orderId=${this.orderDetails.order_id}&sum=${
              this.payDetail.sum
            }&way=1`
          );
        } else {
          console.log("医保");
          if(mpvue.getStorageSync('insuranceOrderId')) {  // 上笔医保支付储存的 orderID
            mpvue.removeStorage({key: 'insuranceOrderId'})
          }
          that.$api.get_user_info({}, { showLoading: true }).then(function(res) {
            var userInfo = res.data[0];
            console.log("userInfo.insurance_card", userInfo.insurance_card);
            if (userInfo.insurance_card) {
              that.$storage.setCardeStatus(step);
              that.$router.push(
                `/pages/center/child/pay/main?orderId=${that.orderDetails.order_id}&sum=${
                  that.payDetail.sum
                }&way=2`
              );
            } else {
              that.$storage.setCardeStatus(step+1);
              that.$router.push(
                `/pages/center/child/makeSure/main?orderId=${that.orderDetails.order_id}&sum=${
                  that.payDetail.sum
                }`
              );
            }
          });
        }
      },
      // 提示选择的是自取
      showTips() {
        this.iscash = true
        if(this.wayJudge) {
          this.payHint()
        } else {
          this.modelStatus = true
        }
      },
      // 获取支付信息
      payHint() {
        let that = this;
        that.modelStatus = false
        console.log(that.addressInfo.address_id, that.storeInfo.placepointid)
        if ((that.wayJudge && (!that.addressInfo.address_id || that.addressInfo.address_id=='')) ||
        (!that.wayJudge && (!that.storeInfo.placepointid || that.storeInfo.placepointid ==''))) {
          $Toast({
            content: '请先选择配送地址或自取门店',
            type: 'warning'
          })
          return
        }
        let param = {
          address_type: that.wayJudge?'0':'1',
          receive_name: that.addressInfo.consignee,
          // province_name: "",
          // province_code: "",
          // city_name: "",
          // city_code: "",
          // district_name: "",
          // district_code: "",
          // phone: "",
          // detail_address: that.addressInfo.address,
          order_no: that.orderDetails.orderno,
          postal_code: that.addressInfo.zipcode
        }
        if(that.wayJudge) {
          Object.keys(that.addressInfo).forEach(key=>{
            param[key] = that.addressInfo[key]
          })
          param.detail_address = that.addressInfo.address
        } else {
          param.detail_address = that.storeInfo.address
          param.place_point_id = that.storeInfo.placepointid
        }

        console.log(param, '传参', this.storeInfo)
        that.$api.complicateAddAddress(param, { showLoading: true }).then(res => {
          if (res.code == 0) {
            if (that.pointType === '1') {
              let data = {
                order_no: that.orderDetails.orderno
              };
              that.$api.pay_hint(data, { showLoading: true }).then(res => {
                that.payDetail = res.data;
                this.PayFlag = true
              });
            } else if (that.pointType === '2') {  // 重症直接跳完成
              // 如果重症药物改变 跳回订单列表
              if(res.msg.indexOf("您有新的诊疗订单") > -1) {
                this.setOrder = true
                return
              }
              setTimeout(() => {
                that.$router.push("/pages/center/child/deal/main");
              }, 600);
            }
          }
        });
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }
  .mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    background: #F9F9F9;
    .mainInfo {
      min-height: 235rpx;
      background: #F9F9F9;
      padding: 10rpx 30rpx 0 30rpx;
      box-shadow: border-box;
      background: url('../../../../../static/images/background2.png') no-repeat 0 0 ;
      background-size: 100% 130rpx;
      .innerBox {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10rpx 34rpx;
        padding-bottom: 22rpx;
        background: #fff;
        border-radius: 10rpx;
        box-shadow: 0px 2rpx 12rpx 1rpx rgba(0, 0, 0, 0.11);
        box-sizing: border-box;
        color: #666666;
        font-size: 30rpx;
        .topTip {
          position: relative;
          height: 85rpx;
          line-height: 85rpx;
          // border: 1px solid black;
        }
        .chooseBtn {
          display: inline-block;
          width:159rpx;
          // width: 82rpx;
          height: 59rpx;
          border-radius: 30rpx;
          background: #4A71E8;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          span {
            position: absolute;
            height: 52rpx;
            line-height: 52rpx;
            color: #fff;
            width: 49%;
            // width: 100%;
            border-radius: 26rpx;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            font-size: 28rpx;
          }
          .open {
            left: 5rpx;
          }
          .close {
            right: 5rpx;
          }
          .active {
            color: #4A71E8;
            background: #fff;
          }
        }
        // 非支付状态
        .nonPayStatus {
          width: 82rpx;
          span {
            width: 100%;
          }
          .open {
            left: 0rpx;
          }
        }
        .addressBox {
          margin-bottom: 16rpx;
          flex: 1;
          display: flex;
          span {
            display: inline-block;
            height: 100%;
          }
          .leftImgBox{
            height: 100%;
            width: 58rpx;
            // border: 1px solid red;
            img {
              height: 46rpx;
              width: 46rpx;
              margin-top: 50%;
              // transform: translateY(-50%);
            }
            .beingMap {
              height: 51rpx;
              width: 38rpx;
              margin-top: 34%;
              // margin-left: 14%;
            }
          }
          span:nth-child(2),span:nth-child(3) {
            flex: 1;
            .boldFont {
              color: #333333;
              font-weight: bold;
              font-size: 40rpx;
              font-family: PingFangSC-Medium, PingFang SC;
            }
            p {
              // height: 50%;
              // line-height: 56rpx;
              width: 100%;
              span {
                color: #666666;
                font-size: 28rpx;
                white-space: nowrap;
                overflow: hidden;
                line-height: 66rpx;
              }
              span:nth-child(1) {
                display: inline-block;
                margin-right: 20rpx;
                min-width: 80rpx;
                max-width: 150rpx;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              span:nth-child(3) {
                text-align: right;
              }
              .boldFont {
                line-height: 56rpx;
                color: #333333;
                font-weight: bold;
                font-size: 40rpx;
                font-family: PingFangSC-Medium, PingFang SC;
              }
            }
            p:nth-child(1) {
              height: 60rpx;
              display: flex;
              margin-bottom: 10rpx;
            }
            .storeName {
              font-size: 34rpx;
              margin-bottom: 10rpx;
            }
          }
        }
      }
    }
    .msgList {
      flex:1;
      width: 100%;
      overflow-y: scroll;
      padding-top: 30rpx;
      // padding-bottom: 30rpx;
      // box-sizing: border-box;
      .contentBox {
        background-color:#fff;
        box-shadow: 0px 2rpx 12rpx 1rpx rgba(0, 0, 0, 0.11);
        border-radius: 10rpx;
        padding: 10rpx 0rpx;
        margin: 0 30rpx 30rpx 30rpx;
        box-sizing: border-box;
        color: #666666;
        div {
          box-sizing: border-box;
        }
        .top {
          height: 72rpx;
          padding: 0 34rpx;
          line-height: 72rpx;
          font-size: 28rpx;
          border-bottom: 1rpx solid #E9E9E9;
        }
        .center {
          padding: 0 34rpx;
          min-height: 100rpx;
          padding-bottom: 10rpx;
          position: relative;
          .infoBox {
            margin: 20rpx 0;
            width: 100%;
            display: flex;
            span{
              display: inline-block;
              color: #333333;
              font-size: 32rpx;
            }
            span:nth-child(2) {
              flex: 1;
              margin-left: 20rpx;
            }
            .bar {
              margin: 0 10rpx;
              color: #888;
            }
            .leftTip {
              display: inline-block;
              font-size: 32rpx;
              color: #666;
              width: 130rpx;
              text-align-last: justify;
              text-align: justify;
              display: flex;
              .spacing {
                display: inline-block;
                flex: 1;
                height: 100%;
                // width: 100%
              }
            }
            // .leftTip:after {
            //   content: " ";
            //   width: 100%;
            //   display: inherit;
            // }
          }
          .infoBox2 {
            margin: 20rpx 0;
            width: 100%;
            span{
              color: #333333;
              font-size: 32rpx;
            }
            span:nth-child(2) {
              margin-left: 20rpx;
            }
            span:nth-child(3) {
              margin-left: 20rpx;
            }
            .bar {
              margin: 0 10rpx;
              color: #888;
            }
            .leftTip {
              display: inline-block;
              font-size: 32rpx;
              color: #666;
              width: 130rpx;
              text-align-last: justify;
              text-align: justify;
              display: flex;
              .spacing {
                display: inline-block;
                flex: 1;
                height: 100%;
              }
            }
          }
          .nameBox {
            margin: 34rpx 0;
            span{
              display: inline-block;
              color: #333333;
              font-size: 32rpx;
            }
            .nameInfo {
              font-size: 44rpx;
              color: #4A71E8;
              margin-right: 39rpx;
              font-weight: 600;
            }
            .bar {
              margin: 0 20rpx;
              color: #888;
            }
          }
          .medicalTips {
            padding-left: 15rpx;
            color: #333333;
            font-size: 34rpx;
            margin-top: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
          }
          .medicalBox {
            font-family: PingFangSC-Regular, PingFang SC;
            padding-left: 15rpx;
            display: flex;
            width: 100%;
            margin: 20rpx 0 10rpx 0;
            font-size: 32rpx;
            color: #333333;
            span {
              display: inline-block;
            }
            span:nth-child(2) {
              width: 160rpx;
              text-align: right;
              color: #333333;
              font-size: 30rpx;
            }
            .medicalName {
              color: #333333;
              flex: 1;
            }
          }
          .redSign {
            position: absolute;
            width: 8rpx;
            height: 24rpx;
            background: #FF715C;
            border-radius: 4rpx;
            left: 0rpx;
            top: 10rpx;
          }
        }
        .bottom {
          margin: 0 30rpx;
          height: 97rpx;
          border-top: 1rpx solid #E9E9E9;
          line-height: 97rpx;
          p {
            display: inline-block;
            width: 50%;
            padding-left: 20rpx;
            box-sizing: border-box;
            span {
              font-size: 30rpx;
              color: #999999;
              margin-right: 30rpx;
            }
            .dollor {
              margin-left: 30rpx;
              font-size: 20rpx;
              color: #FF5453;
            }
            .price {
              font-size: 30rpx;
              color: #FF5453;
              margin-right: 8rpx;
            }
          }
          p:nth-child(2) {
            text-align: right;
          }
          .infoBox {
            // margin: 20rpx 0;
            width: 100%;
            display: flex;
            span{
              display: inline-block;
              color: #333333;
              font-size: 32rpx;
            }
            span:nth-child(1) {
              flex: 1;
            }
            span:nth-child(2) {
              color: #4A71E8;
              width: 100rpx;
              text-align: right;
              margin-left: 20rpx;
            }
          }
        }
        .expressBox {
          color: #666666;
          font-size: 30rpx;
          height: 72rpx;
          position: relative;
          span {
            display: inline-block;
            // position: relative;
            height: 100%;
            min-width: 50rpx;
            line-height: 72rpx;
            margin-left: 20rpx;
            overflow-x: hidden;
            img {
              position: absolute;
              height: 41rpx;
              width: 41rpx;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          .moveTop {
            transform: translateY(-13px);
          }
        }
      }
    }
  }
  .payBtn {
    width: 750rpx;
    height: 110rpx;
    background: #FFFFFF;
    box-shadow: 1rpx 0rpx 4rpx 0rpx #CCCCCC;
    padding: 17rpx 30rpx;
    display: flex;
    box-sizing: border-box;
    color: #666666;
    border-top: 1rpx solid #E9E9E9;
    p {
      height: 100%;
      text-align: right;
      padding-right: 35rpx;
      box-sizing: border-box;
      line-height: 76rpx;
      flex: 1;
      display: inline-block;
      .price {
        color: #FF5C5B;
      }
    }
    .btn {
      height: 100%;
      width: 174rpx;
      border-radius: 38rpx;
      border: 1rpx solid #ADADAD;
      color: #666666;
      line-height: 76rpx;
      display: inline-block;
      text-align: center;
    }
  }
  .ipxBottom {
    height: 30rpx;
    background: #fff;
  }
  .nonePadding {
    padding: 20rpx 0 0 0;
  }
  .payModal {
    position: absolute;
    top: 0;
    left: 0;
    // bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99998;
    .pay_content {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 850rpx;
      background-color: #fff;
      .title {
        width: 100%;
        height: 90rpx;
        border-bottom: 1rpx solid #e9e9e9;
        color: #333;
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        text-align: center;
        line-height: 90rpx;
        display: flex;
        p {
          flex: 1;
          color: #333;
          font-size: 32rpx;
        }
        img {
          width: 45rpx;
          height: 45rpx;
          margin: 20rpx 20rpx 0 0;
          display: inline-block;
        }
      }
      .lineItem {
        width: 100%;
        height: 100rpx;
        border-bottom: 1rpx solid #e9e9e9;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        padding-left: 30rpx;
        color: #666;
        .cost {
          color: #333;
        }
        p {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          color: #333;
          img {
            margin-left: 0;
          }
          span {
            color: #999;
            font-size: 28rpx;
          }
        }
        img {
          width: 50rpx;
          height: 50rpx;
          margin: 0 30rpx;
        }
      }
      .sureBtn {
        padding:0 30rpx;
        box-sizing: border-box;
        color: #666;
        .total {
          margin: 30rpx 0;
          span {
            color: #ff5453;
            font-size: 36rpx;
          }
        }
        .tip {
          margin: 10rpx 30rpx 50rpx 0;
          font-size: 26rpx;
          color: rgba(153, 153, 153, 1);
        }
        .button {
          // width: 660rpx;
          height: 92rpx;
          background: rgba(74, 100, 234, 1);
          line-height: 92rpx;
          text-align: center;
          color: #fff;
          border-radius: 46rpx;
          margin-left: 16rpx;
        }
      }
    }
  }
  .fillOtherMsg {
    position: absolute;
    flex: 1;
    height: 100%;
    width: 100%;
    background-color: #fff;
    z-index: 9999;
    box-sizing: border-box;
    // padding: 0 30rpx;
    padding-top: 20rpx;
    display: flex;
    flex-direction: column;
    .textCont {
      margin-top: 20rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-bottom: 30rpx;
      .lineDiv {
        height: 2rpx;
        width: 110%;
        margin-left: -5%;
        background-color: #E9E9E9;
      }
      .newIpt {
        flex: 1;
        width: 100%;
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        overflow: hidden;
      }
      .fontNumCount {
        color: #CCCCCC;
        height: 80rpx;
        text-align: right;
        font-size: 28rpx;
      }
    }
    .submitBtn {
      margin-bottom: 35rpx;
      width: 100%;
      height: 90rpx;
      background:linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%);
      font-size: 34rpx;
      line-height: 90rpx;
      text-align: center;
      color: #fff;
    }
    // 反馈详情
    .feedBackBox {
      padding: 0 30rpx;
      border-bottom: 10rpx solid rgba(249,249,249,1);
      .titleTime {
        height: 90rpx;
        display: flex;
        line-height: 90rpx;
        span {
          flex: 1;
        }
        .title{
          font-size: 34rpx;
          color: #333;
          font-weight: bold;
        }
        .time {
          text-align: right;
          color: #666666;
          font-size: 30rpx;
        }
      }
      .content {
        font-size:32rpx;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:42rpx;
        margin: 20rpx 0 60rpx 0;
      }
    }
  }
  .payComfirmModal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    .sure {
      z-index: 2;
      width: 650rpx;
      height: 410rpx;
      overflow: hidden;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -325rpx;
      margin-top: -205rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      font-size: 34rpx;
      .top {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .fontWeight{
        font-weight: bold;
      }
      .title {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
        padding: 0 30rpx;
      }
      .title2{
        flex: 1;
        display: flex;
        // align-items: center;
        justify-content: center;
        // margin-top: 20rpx;
        padding: 0 30rpx;
      }
      .topTips {
        flex: 1;
        margin: 136rpx 100rpx 0 99rpx;
      }
      .btm {
        height: 100rpx;
        display: flex;
        div {
          flex: 1;
          line-height: 100rpx;
          text-align: center;
          background: #f7f8fa;
        }
        div:nth-child(2) {
          background:#4A64EA;
          color: #fff;
        }
        .backBlue {
          background:#4A64EA;
          color: #fff;
        }
      }
    }
    
  }
</style>
